<template>
  <div>
    <!--添加课程对话框 visible.sync：是否显示对话框；before-close：关闭时运行-->
    <el-dialog title="添加课程" :visible.sync="courseDialogSwitch" width="40%" :before-close="handleClose">
      <!--表单结构 model：绑定值为courseDataTemp-->
      <el-form ref="courseDataTemp" :model="courseDataTemp" label-width="80px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="课程名称">
              <el-input v-model="courseDataTemp.name" placeholder="输入课程名称"></el-input>
            </el-form-item>
            <el-form-item label="课程课时">
              <el-input v-model="courseDataTemp.periods" placeholder="输入课程课时"></el-input>
            </el-form-item>
            <el-form-item label="课程学分">
              <el-input v-model="courseDataTemp.credit" placeholder="输入课程学分"></el-input>
            </el-form-item>
            <el-form-item label="所属教师">
              <el-button type="primary" plain @click="addTea">添加教师</el-button>
            </el-form-item>
            <el-form-item label="所属学生">
              <el-button type="primary" plain @click="addStu">添加学生</el-button>
            </el-form-item>
            <el-form-item label="所属题目">
              <el-button type="primary" plain @click="addTop">添加题目</el-button>
            </el-form-item>
            <el-form-item label="所属附件">
              <el-button type="primary" plain @click="addAnn">添加附件</el-button>
            </el-form-item>
            <el-form-item label="是否分组">
              <el-switch v-model="courseDataTemp.groupingSwitch"></el-switch>
            </el-form-item>
          </el-col>
          <!--封面-->
          <el-col :span="12">
            <div class="img-shell">
              <el-image class="img" :src="courseDataTemp.coverFilePath"  fit="full"></el-image>
              <!--鼠标移动到图片时显示按钮，在style设计-->
              <div class="img-btn-shell">
                <el-button class="img-btn" type="primary" @click="UpImgOn">更换图片</el-button>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-form-item label="备注">
          <el-input type="textarea" v-model="courseDataTemp.notes"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="cancellation">取 消</el-button>
        <el-button type="primary" @click="determine">确 定</el-button>
      </span>
    </el-dialog>
    <addTeacher :addTeaBtn="addTeaBtn" @offAddTea="offAddTea"></addTeacher>
    <addStudent :addStuBtn="addStuBtn" @offAddStu="offAddStu"></addStudent>
    <addTopic :addTopBtn="addTopBtn" @offAddTop="offAddTop"></addTopic>
    <addAnnex :addAnnBtn="addAnnBtn" @offAddAnn="offAddAnn"></addAnnex>
    <addCover :addCovBtn="addCovBtn" :nowImg="courseDataTemp.coverFilePath" @offAddCov="offAddCov"></addCover>
  </div>
</template>

<script>
import addStudent from "@/views/system/course/addData/addStudent.vue";
import addTopic from "@/views/system/course/addData/addTopic.vue";
import addAnnex from "@/views/system/course/addData/addAnnex.vue";
import addCover from "@/views/system/course/addData/addCover.vue";
import addTeacher from "@/views/system/course/addData/addTeacher.vue";
import {addCourse, uploadCover} from "@/api/system/course";
import course_cover from '../../../../assets/images/course-cover.png'
export default {
  //变量区
  data(){
    return{
      courseDataTemp:{
        name:null,//课程名称
        coverFilePath:course_cover,//课程封面文件地址
        topicSwitch:false,//题目开关
        groupingSwitch:false,//分组开关
        annexSwitch:false,//附件开关
        notes:null,//备注
        credit:null,//学分
        periods:null,//课时
      },
      addTeaBtn:false,
      addStuBtn:false,
      addTopBtn:false,
      addAnnBtn:false,
      addCovBtn:false,
      //封面数据暂存
      imgFormTemp:0,
    }
  },
  //父组件传递的变量
  props: {
    courseDialogSwitch:Boolean,
  },
  //监听变量的变化
  watch: {
    //逻辑入口 数据变化，父组件触动
    courseDialogSwitch(newValue){

    }
  },
  //函数区
  methods: {
    /**重置表单*/
    result(){
      this.courseDataTemp= {
        name:null,//课程名称
        coverFilePath:course_cover,//课程封面文件地址
        topicSwitch:false,//题目开关
        groupingSwitch:false,//分组开关
        annexSwitch:false,//附件开关
        notes:null,//备注
        credit:null,//学分
        periods:null,//课时
      };
      this.imgFormTemp=0;
    },
    /**打开封面对话框*/
    UpImgOn(){
      this.addCovBtn=true;
    },
    /**关闭封面对话框*/
    offAddCov(newValue){
      this.addCovBtn=newValue.btn;//关闭课程封面对话框
      this.courseDataTemp.coverFilePath=newValue.img;//获取图片路径
      if(newValue.imgdata){//如果有更换图片，则获取图片二进制数据
        this.imgFormTemp={
          data:newValue.imgdata,
          name:newValue.imgname,
        }
      }
    },
    //添加课程方法
    AddData(){
      let data={
        "content": this.courseDataTemp.notes,
        "courseName": this.courseDataTemp.name,
        "periods": this.courseDataTemp.periods,
        "credit":this.courseDataTemp.credit,
      }
      addCourse(data).then(res=>{
        if(this.imgFormTemp!==0){
          this.AddDataCover(res.data.courseId);
        }else{
          this.result();
          this.$modal.msgSuccess("添加课程成功");
          this.$emit('offCourseDialog', false);
        }
      })
    },
    //添加课程封面
    AddDataCover(courseId){
      let formData = new FormData();
      formData.append("imgfile", this.imgFormTemp.data, this.imgFormTemp.name);
      formData.append("id",courseId);
      uploadCover(formData).then(response => {
        this.result();
        this.$modal.msgSuccess("添加课程成功");
        this.$emit('offCourseDialog', false);
      });
    },
    /**添加老师*/
    addTea(){
      this.addTeaBtn=true;
    },
    /**关闭添加老师对话框*/
    offAddTea(newValue){
      this.addTeaBTn=newValue;
    },
    /**添加学生*/
    addStu(){
      this.addStuBtn=true;
    },
    /**关闭添加学生对话框*/
    offAddStu(newValue){
      this.addStuBtn=newValue;
    },
    /**添加题目*/
    addTop(){
      this.addTopBtn=true;
    },
    /**关闭添加题目对话框*/
    offAddTop(newValue){
      this.addTopBtn=newValue;
    },
    /**添加附件*/
    addAnn(){
      this.addAnnBtn=true;
    },
    /**关闭添加附件对话框*/
    offAddAnn(newValue){
      this.addAnnBtn=newValue;
    },
    //关闭对话框确认框
    handleClose() {
      this.$confirm('确认关闭？')
        .then(_ => {
          this.$emit('offCourseDialog', false);
        })
    },
    //取消对话框
    cancellation(){
      this.$emit('offCourseDialog', false);
    },
    //确定对话框
    determine(){
      this.AddData();
    },
  },
  //组件区
  components: {
    addStudent,
    addTopic,
    addAnnex,
    addCover,
    addTeacher,
  },
}
</script>

<style scoped>
.img-shell{
  display: flex;
  justify-content: center;
  position: relative;
}
.img{
  width: 70%;
  aspect-ratio:1/1;
  border: 1px solid rgb(198, 198, 201);
  border-radius: 3%;

}
.img-btn-shell{
  position: absolute;
  width: 70%;
  aspect-ratio:1/1;
  display: flex;
  .img-btn{
    display: none;
  }
}
.img-btn-shell:hover{
  position: absolute;
  width: 70%;
  aspect-ratio:1/1;
  display: flex;
  justify-content: center;
  align-items: center;
  .img-btn{
    display: flex;
  }
}
</style>
